<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博沃智慧 - 个人知识库管理</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 知识库卡片 */
        .knowledge-card {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .knowledge-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.1);
        }
        .knowledge-card.active {
            border-color: #667eea;
            background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
        }

        /* 文档项 */
        .document-item {
            transition: all 0.3s ease;
        }
        .document-item:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        /* 进度条 */
        .progress-bar {
            height: 6px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        /* 状态标签 */
        .status-badge {
            transition: all 0.2s ease;
        }
        .status-badge:hover {
            transform: scale(1.05);
        }

        /* 搜索框 */
        .search-box {
            transition: all 0.3s ease;
        }
        .search-box:focus-within {
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        /* 按钮动画 */
        .btn-primary {
            background: var(--primary-gradient);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }
        
        /* 文档操作按钮增强 */
        .knowledge-card .tooltip {
            position: relative;
            cursor: pointer;
        }
        
        .knowledge-card .tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #1f2937;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            margin-bottom: 4px;
        }
        
        .knowledge-card .tooltip:hover::after {
            opacity: 1;
        }
        
        .knowledge-card .tooltip:hover {
            transform: scale(1.1);
        }
        
        .knowledge-card .tooltip[data-tooltip="编辑"]:hover {
            color: #6366f1;
        }
        
        .knowledge-card .tooltip[data-tooltip="查看进度"]:hover {
            color: #10b981;
        }
        
        .knowledge-card .tooltip[data-tooltip="删除"]:hover {
            color: #ef4444;
        }
        
        .knowledge-card .tooltip[data-tooltip="预览"]:hover {
            color: #3b82f6;
        }
        
        /* 按钮点击效果 */
        .knowledge-card .tooltip:active {
            transform: scale(0.95);
        }
        
        /* 模态框动画 */
        .modal-enter {
            animation: modalEnter 0.3s ease-out;
        }
        
        .modal-exit {
            animation: modalExit 0.3s ease-in;
        }
        
        @keyframes modalEnter {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes modalExit {
            from {
                opacity: 1;
                transform: scale(1);
            }
            to {
                opacity: 0;
                transform: scale(0.9);
            }
        }

        /* 文件上传区域 */
        .upload-area {
            border: 2px dashed #d1d5db;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.05);
        }
        .upload-area.dragover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        /* 标签 */
        .tag {
            transition: all 0.2s ease;
        }
        .tag:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* 分页控件 */
        .pagination-btn {
            transition: all 0.2s ease;
        }
        .pagination-btn:hover {
            background: #667eea;
            color: white;
        }

        /* 加载动画 */
        .loading-dots {
            display: inline-flex;
            gap: 4px;
        }
        .loading-dots span {
            width: 6px;
            height: 6px;
            background: #667eea;
            border-radius: 50%;
            animation: loadingBounce 1.4s ease-in-out infinite both;
        }
        .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
        .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes loadingBounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        /* 预览面板 */
        .preview-panel {
            transition: all 0.3s ease;
        }
        .preview-panel:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        /* 工具提示 */
        .tooltip {
            position: relative;
        }
        .tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #1f2937;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .tooltip:hover::after {
            opacity: 1;
        }

        /* 统计卡片 */
        .stat-card {
            transition: all 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.1);
        }

        /* 消息提示 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            animation: slideIn 0.3s ease;
        }
        @keyframes slideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }

        /* 代码高亮 */
        .code-block {
            background: #1e293b;
            color: #e2e8f0;
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
        }

        /* 文档类型图标 */
        .file-icon-pdf { color: #ef4444; }
        .file-icon-doc { color: #3b82f6; }
        .file-icon-docx { color: #3b82f6; }
        .file-icon-txt { color: #6b7280; }
        .file-icon-md { color: #8b5cf6; }
        .file-icon-default { color: #6b7280; }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-brain text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">博沃智慧</h1>
                            <p class="text-xs text-slate-500">知识库管理</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                        <i class="fas fa-chevron-left text-slate-600 hidden"></i>
                    </button>
                </div>
            </div>

            <!-- 知识库列表 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-4">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="fade-text font-semibold text-slate-700">我的知识库</h3>
                    <button class="fade-text p-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600 transition-colors" onclick="showCreateLibraryModal()">
                        <i class="fas fa-plus text-sm"></i>
                    </button>
                </div>

                <div class="space-y-2">
                    <div class="knowledge-item bg-indigo-50 border border-indigo-200 rounded-lg p-3 cursor-pointer fade-text" data-library="1">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-book text-indigo-600"></i>
                                <span class="font-medium text-indigo-800">技术文档库</span>
                            </div>
                            <span class="text-xs text-indigo-600">45 文档</span>
                        </div>
                    </div>
                    <div class="knowledge-item bg-slate-50 border border-slate-200 rounded-lg p-3 cursor-pointer fade-text" data-library="2">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-briefcase text-slate-600"></i>
                                <span class="font-medium text-slate-700">工作资料库</span>
                            </div>
                            <span class="text-xs text-slate-500">23 文档</span>
                        </div>
                    </div>
                    <div class="knowledge-item bg-slate-50 border border-slate-200 rounded-lg p-3 cursor-pointer fade-text" data-library="3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-graduation-cap text-slate-600"></i>
                                <span class="font-medium text-slate-700">学习资料库</span>
                            </div>
                            <span class="text-xs text-slate-500">67 文档</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">张晓明</p>
                        <p class="text-xs text-slate-500">专业版用户</p>
                    </div>
                    <div class="fade-text">
                        <button class="p-2 rounded-lg hover:bg-slate-100 transition-colors" onclick="window.location.href='settings.html'">
                            <i class="fas fa-cog text-slate-600"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="flex-1 flex flex-col bg-white">
            <!-- 标题栏 -->
            <div class="bg-white border-b border-slate-200 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-slate-800">技术文档库</h1>
                        <p class="text-slate-500 mt-1">管理和组织您的个人知识库文档</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="btn-primary px-4 py-2 text-white rounded-lg font-medium" onclick="showUploadModal()">
                            <i class="fas fa-upload mr-2"></i>上传文档
                        </button>
                        <button class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg font-medium" onclick="showExportModal()">
                            <i class="fas fa-download mr-2"></i>导出
                        </button>
                    </div>
                </div>
            </div>

            <!-- 统计信息 -->
            <div class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div class="stat-card bg-blue-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-blue-600">总文档数</p>
                                <p class="text-2xl font-bold text-blue-800">45</p>
                            </div>
                            <i class="fas fa-file-alt text-3xl text-blue-400"></i>
                        </div>
                    </div>
                    <div class="stat-card bg-green-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-green-600">已解析</p>
                                <p class="text-2xl font-bold text-green-800">38</p>
                            </div>
                            <i class="fas fa-check-circle text-3xl text-green-400"></i>
                        </div>
                    </div>
                    <div class="stat-card bg-yellow-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-yellow-600">解析中</p>
                                <p class="text-2xl font-bold text-yellow-800">5</p>
                            </div>
                            <i class="fas fa-clock text-3xl text-yellow-400"></i>
                        </div>
                    </div>
                    <div class="stat-card bg-purple-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-purple-600">存储使用</p>
                                <p class="text-2xl font-bold text-purple-800">1.2GB</p>
                            </div>
                            <i class="fas fa-database text-3xl text-purple-400"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 筛选和搜索 -->
            <div class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <div class="search-box relative">
                            <input type="text" placeholder="搜索文档..." class="pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500 w-64">
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                        </div>
                        <select class="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                            <option value="">所有类型</option>
                            <option value="pdf">PDF</option>
                            <option value="doc">DOC</option>
                            <option value="docx">DOCX</option>
                            <option value="txt">TXT</option>
                            <option value="md">MD</option>
                        </select>
                        <select class="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                            <option value="">所有状态</option>
                            <option value="parsed">已解析</option>
                            <option value="parsing">解析中</option>
                            <option value="failed">解析失败</option>
                        </select>
                    </div>
                    <div class="flex items-center space-x-2 bg-slate-100 rounded-lg p-1">
                        <button id="listViewBtn" class="px-3 py-1 text-sm bg-white rounded shadow-sm transition-colors" onclick="switchView('list')">
                            <i class="fas fa-list"></i>
                        </button>
                        <button id="thumbnailViewBtn" class="px-3 py-1 text-sm text-slate-600 hover:bg-slate-200 rounded transition-colors" onclick="switchView('thumbnail')">
                            <i class="fas fa-th-large"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 文档列表 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 文档卡片 1 -->
                    <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-pdf text-blue-600 text-xl file-icon-pdf"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-slate-800">Python编程指南</h3>
                                    <p class="text-sm text-slate-500">2.3MB • PDF</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-1">
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                    <i class="fas fa-eye text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex items-center justify-between text-sm mb-2">
                                <span class="text-slate-600">解析状态</span>
                                <span class="status-badge px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                            </div>
                            <div class="w-full bg-slate-200 rounded-full h-2">
                                <div class="progress-bar" style="width: 100%"></div>
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">分片数量</span>
                                <span class="font-medium">156</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">上传时间</span>
                                <span class="font-medium">2024-01-15</span>
                            </div>
                        </div>
                        
                        <div class="mt-4 flex flex-wrap gap-1">
                            <span class="tag px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">Python</span>
                            <span class="tag px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">编程</span>
                            <span class="tag px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">技术文档</span>
                        </div>
                    </div>

                    <!-- 文档卡片 2 -->
                    <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-word text-green-600 text-xl file-icon-docx"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-slate-800">机器学习算法总结</h3>
                                    <p class="text-sm text-slate-500">1.8MB • DOCX</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-1">
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                    <i class="fas fa-eye text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex items-center justify-between text-sm mb-2">
                                <span class="text-slate-600">解析状态</span>
                                <span class="status-badge px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                            </div>
                            <div class="w-full bg-slate-200 rounded-full h-2">
                                <div class="progress-bar" style="width: 100%"></div>
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">分片数量</span>
                                <span class="font-medium">89</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">上传时间</span>
                                <span class="font-medium">2024-01-12</span>
                            </div>
                        </div>
                        
                        <div class="mt-4 flex flex-wrap gap-1">
                            <span class="tag px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full">机器学习</span>
                            <span class="tag px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">算法</span>
                            <span class="tag px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">AI</span>
                        </div>
                    </div>

                    <!-- 文档卡片 3 - 解析中 -->
                    <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-pdf text-yellow-600 text-xl file-icon-pdf"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-slate-800">深度学习框架对比</h3>
                                    <p class="text-sm text-slate-500">3.1MB • PDF</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-1">
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="查看进度">
                                    <i class="fas fa-chart-line text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="取消">
                                    <i class="fas fa-times text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex items-center justify-between text-sm mb-2">
                                <span class="text-slate-600">解析状态</span>
                                <span class="status-badge px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">解析中</span>
                            </div>
                            <div class="w-full bg-slate-200 rounded-full h-2">
                                <div class="progress-bar" style="width: 65%"></div>
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">预计分片</span>
                                <span class="font-medium">~120</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">开始时间</span>
                                <span class="font-medium">2024-01-16 14:30</span>
                            </div>
                        </div>
                        
                        <div class="mt-4 flex items-center space-x-2">
                            <div class="loading-dots">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                            <span class="text-sm text-slate-500">正在解析第 78/120 页...</span>
                        </div>
                    </div>

                    <!-- 文档卡片 4 -->
                    <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-alt text-purple-600 text-xl file-icon-txt"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-slate-800">API设计规范</h3>
                                    <p class="text-sm text-slate-500">156KB • TXT</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-1">
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                    <i class="fas fa-eye text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex items-center justify-between text-sm mb-2">
                                <span class="text-slate-600">解析状态</span>
                                <span class="status-badge px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                            </div>
                            <div class="w-full bg-slate-200 rounded-full h-2">
                                <div class="progress-bar" style="width: 100%"></div>
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">分片数量</span>
                                <span class="font-medium">23</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">上传时间</span>
                                <span class="font-medium">2024-01-10</span>
                            </div>
                        </div>
                        
                        <div class="mt-4 flex flex-wrap gap-1">
                            <span class="tag px-2 py-1 bg-indigo-100 text-indigo-700 text-xs rounded-full">API</span>
                            <span class="tag px-2 py-1 bg-teal-100 text-teal-700 text-xs rounded-full">设计</span>
                            <span class="tag px-2 py-1 bg-pink-100 text-pink-700 text-xs rounded-full">规范</span>
                        </div>
                    </div>

                    <!-- 文档卡片 5 -->
                    <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-excel text-red-600 text-xl file-icon-default"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-slate-800">数据库性能指标</h3>
                                    <p class="text-sm text-slate-500">2.8MB • XLSX</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-1">
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                    <i class="fas fa-eye text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex items-center justify-between text-sm mb-2">
                                <span class="text-slate-600">解析状态</span>
                                <span class="status-badge px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">解析失败</span>
                            </div>
                            <div class="w-full bg-slate-200 rounded-full h-2">
                                <div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div>
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">错误信息</span>
                                <span class="font-medium text-red-600">格式不支持</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">失败时间</span>
                                <span class="font-medium">2024-01-14</span>
                            </div>
                        </div>
                        
                        <div class="mt-4 flex items-center space-x-2">
                            <button class="px-3 py-1 bg-red-100 text-red-700 text-xs rounded-full hover:bg-red-200">
                                <i class="fas fa-redo mr-1"></i>重新解析
                            </button>
                            <button class="px-3 py-1 bg-slate-100 text-slate-700 text-xs rounded-full hover:bg-slate-200">
                                <i class="fas fa-info-circle mr-1"></i>查看详情
                            </button>
                        </div>
                    </div>

                    <!-- 文档卡片 6 -->
                    <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-code text-teal-600 text-xl file-icon-md"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-slate-800">Docker容器化指南</h3>
                                    <p class="text-sm text-slate-500">890KB • MD</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-1">
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                    <i class="fas fa-eye text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex items-center justify-between text-sm mb-2">
                                <span class="text-slate-600">解析状态</span>
                                <span class="status-badge px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                            </div>
                            <div class="w-full bg-slate-200 rounded-full h-2">
                                <div class="progress-bar" style="width: 100%"></div>
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">分片数量</span>
                                <span class="font-medium">67</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-600">上传时间</span>
                                <span class="font-medium">2024-01-08</span>
                            </div>
                        </div>
                        
                        <div class="mt-4 flex flex-wrap gap-1">
                            <span class="tag px-2 py-1 bg-cyan-100 text-cyan-700 text-xs rounded-full">Docker</span>
                            <span class="tag px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">容器化</span>
                            <span class="tag px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">DevOps</span>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="flex items-center justify-between mt-6">
                    <span class="text-sm text-slate-500">显示 1-6 条，共 45 条记录</span>
                    <div class="flex items-center space-x-1">
                        <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">上一页</button>
                        <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded bg-slate-100">1</button>
                        <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">2</button>
                        <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">3</button>
                        <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">下一页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 上传文档模态框 -->
    <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-96 max-w-md">
            <h3 class="text-lg font-semibold mb-4">上传文档</h3>
            <div class="mb-4">
                <label class="block text-sm font-medium text-slate-700 mb-2">选择知识库</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                    <option value="1">技术文档库</option>
                    <option value="2">工作资料库</option>
                    <option value="3">学习资料库</option>
                </select>
            </div>
            <div class="upload-area p-8 rounded-lg text-center mb-4 border-2 border-dashed border-slate-300">
                <i class="fas fa-cloud-upload-alt text-4xl text-slate-400 mb-2"></i>
                <p class="text-slate-600">点击或拖拽文件到此处</p>
                <p class="text-xs text-slate-400 mt-1">支持 PDF, DOC, DOCX, TXT, MD 等格式</p>
                <input type="file" id="documentFileInput" class="hidden" multiple accept=".pdf,.doc,.docx,.txt,.md">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-slate-700 mb-2">标签（用逗号分隔）</label>
                <input type="text" placeholder="例如：技术,文档,编程" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
            </div>
            <div class="flex justify-end space-x-2">
                <button onclick="closeUploadModal()" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
                <button onclick="uploadDocuments()" class="btn-primary px-4 py-2 text-white rounded-lg">上传</button>
            </div>
        </div>
    </div>

    <!-- 创建知识库模态框 -->
    <div id="createLibraryModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-96 max-w-md">
            <h3 class="text-lg font-semibold mb-4">创建知识库</h3>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">知识库名称</label>
                    <input type="text" placeholder="请输入知识库名称" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">描述</label>
                    <textarea rows="3" placeholder="请输入知识库描述" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500 resize-none"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">图标</label>
                    <div class="grid grid-cols-6 gap-2">
                        <button class="library-icon p-2 border border-slate-300 rounded hover:bg-indigo-50 hover:border-indigo-300">
                            <i class="fas fa-book text-slate-600"></i>
                        </button>
                        <button class="library-icon p-2 border border-slate-300 rounded hover:bg-indigo-50 hover:border-indigo-300">
                            <i class="fas fa-briefcase text-slate-600"></i>
                        </button>
                        <button class="library-icon p-2 border border-slate-300 rounded hover:bg-indigo-50 hover:border-indigo-300">
                            <i class="fas fa-graduation-cap text-slate-600"></i>
                        </button>
                        <button class="library-icon p-2 border border-slate-300 rounded hover:bg-indigo-50 hover:border-indigo-300">
                            <i class="fas fa-flask text-slate-600"></i>
                        </button>
                        <button class="library-icon p-2 border border-slate-300 rounded hover:bg-indigo-50 hover:border-indigo-300">
                            <i class="fas fa-code text-slate-600"></i>
                        </button>
                        <button class="library-icon p-2 border border-slate-300 rounded hover:bg-indigo-50 hover:border-indigo-300">
                            <i class="fas fa-heart text-slate-600"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="flex justify-end space-x-2 mt-6">
                <button onclick="closeCreateLibraryModal()" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
                <button onclick="createLibrary()" class="btn-primary px-4 py-2 text-white rounded-lg">创建</button>
            </div>
        </div>
    </div>

    <!-- 文档预览模态框 -->
    <div id="previewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-4/5 max-w-4xl max-h-[80vh] overflow-hidden">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold">文档预览</h3>
                <button onclick="closePreviewModal()" class="p-2 hover:bg-slate-100 rounded-lg">
                    <i class="fas fa-times text-slate-600"></i>
                </button>
            </div>
            <div class="preview-panel bg-slate-50 rounded-lg p-6 h-[60vh] overflow-y-auto">
                <div class="space-y-4">
                    <div>
                        <h4 class="font-semibold text-slate-800 mb-2">文档信息</h4>
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div>
                                <span class="text-slate-600">文件名：</span>
                                <span class="font-medium">Python编程指南.pdf</span>
                            </div>
                            <div>
                                <span class="text-slate-600">文件大小：</span>
                                <span class="font-medium">2.3MB</span>
                            </div>
                            <div>
                                <span class="text-slate-600">上传时间：</span>
                                <span class="font-medium">2024-01-15</span>
                            </div>
                            <div>
                                <span class="text-slate-600">解析状态：</span>
                                <span class="font-medium text-green-600">已解析</span>
                            </div>
                        </div>
                    </div>
                    
                      
                    <div>
                        <h4 class="font-semibold text-slate-800 mb-2">解析统计</h4>
                        <div class="grid grid-cols-3 gap-4">
                            <div class="bg-blue-50 p-3 rounded-lg text-center">
                                <p class="text-2xl font-bold text-blue-600">156</p>
                                <p class="text-xs text-blue-600">总分片数</p>
                            </div>
                            <div class="bg-green-50 p-3 rounded-lg text-center">
                                <p class="text-2xl font-bold text-green-600">145</p>
                                <p class="text-xs text-green-600">有效分片</p>
                            </div>
                            <div class="bg-purple-50 p-3 rounded-lg text-center">
                                <p class="text-2xl font-bold text-purple-600">23.5K</p>
                                <p class="text-xs text-purple-600">总字符数</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
            const barsIcon = sidebarToggle.querySelector('.fa-bars');
            const chevronIcon = sidebarToggle.querySelector('.fa-chevron-left');
            
            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');
            
            // 切换图标显示
            if (isCollapsed) {
                barsIcon.classList.add('hidden');
                chevronIcon.classList.remove('hidden');
            } else {
                barsIcon.classList.remove('hidden');
                chevronIcon.classList.add('hidden');
            }
            
            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 知识库切换
        const knowledgeItems = document.querySelectorAll('.knowledge-item');
        knowledgeItems.forEach(item => {
            item.addEventListener('click', () => {
                knowledgeItems.forEach(i => {
                    i.classList.remove('bg-indigo-50', 'border-indigo-200');
                    i.classList.add('bg-slate-50', 'border-slate-200');
                    i.querySelector('i').classList.remove('text-indigo-600');
                    i.querySelector('i').classList.add('text-slate-600');
                    i.querySelector('span').classList.remove('text-indigo-800');
                    i.querySelector('span').classList.add('text-slate-700');
                });
                
                item.classList.remove('bg-slate-50', 'border-slate-200');
                item.classList.add('bg-indigo-50', 'border-indigo-200');
                item.querySelector('i').classList.remove('text-slate-600');
                item.querySelector('i').classList.add('text-indigo-600');
                item.querySelector('span').classList.remove('text-slate-700');
                item.querySelector('span').classList.add('text-indigo-800');
                
                // 更新页面标题
                const libraryName = item.querySelector('span').textContent;
                document.querySelector('h1').textContent = libraryName;
            });
        });

        // 上传模态框
        function showUploadModal() {
            document.getElementById('uploadModal').classList.remove('hidden');
        }

        function closeUploadModal() {
            document.getElementById('uploadModal').classList.add('hidden');
        }

        function uploadDocuments() {
            const files = document.getElementById('documentFileInput').files;
            if (files.length > 0) {
                showToast(`正在上传 ${files.length} 个文件...`, 'info');
                setTimeout(() => {
                    closeUploadModal();
                    showToast('文件上传成功！', 'success');
                }, 2000);
            }
        }

        // 创建知识库模态框
        function showCreateLibraryModal() {
            document.getElementById('createLibraryModal').classList.remove('hidden');
        }

        function closeCreateLibraryModal() {
            document.getElementById('createLibraryModal').classList.add('hidden');
        }

        function createLibrary() {
            showToast('知识库创建成功！', 'success');
            closeCreateLibraryModal();
        }

        // 预览模态框
        function showPreviewModal() {
            document.getElementById('previewModal').classList.remove('hidden');
        }

        function closePreviewModal() {
            document.getElementById('previewModal').classList.add('hidden');
        }

        // 绑定预览按钮事件
        document.addEventListener('click', (e) => {
            if (e.target.closest('.tooltip') && e.target.closest('.tooltip').dataset.tooltip === '预览') {
                showPreviewModal();
            }
        });

        // 拖拽上传功能
        const uploadAreas = document.querySelectorAll('.upload-area');
        uploadAreas.forEach(area => {
            area.addEventListener('dragover', (e) => {
                e.preventDefault();
                area.classList.add('dragover');
            });

            area.addEventListener('dragleave', () => {
                area.classList.remove('dragover');
            });

            area.addEventListener('drop', (e) => {
                e.preventDefault();
                area.classList.remove('dragover');
                const files = e.dataTransfer.files;
                console.log('拖拽的文件：', files);
            });

            area.addEventListener('click', () => {
                const input = area.parentElement.querySelector('input[type="file"]');
                if (input) input.click();
            });
        });

        // Toast 提示
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `toast p-4 rounded-lg shadow-lg ${
                type === 'success' ? 'bg-green-500 text-white' :
                type === 'error' ? 'bg-red-500 text-white' :
                'bg-blue-500 text-white'
            }`;
            toast.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas ${
                        type === 'success' ? 'fa-check-circle' :
                        type === 'error' ? 'fa-exclamation-circle' :
                        'fa-info-circle'
                    }"></i>
                    <span>${message}</span>
                </div>
            `;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 3000);
        }

        // 搜索功能
        const searchInput = document.querySelector('input[placeholder="搜索文档..."]');
        searchInput.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            // 这里可以实现搜索逻辑
            console.log('搜索：', searchTerm);
        });

        // 筛选功能
        const filterSelects = document.querySelectorAll('select');
        filterSelects.forEach(select => {
            select.addEventListener('change', (e) => {
                // 这里可以实现筛选逻辑
                console.log('筛选：', e.target.value);
            });
        });

        // 文档操作
        document.addEventListener('click', (e) => {
            const tooltip = e.target.closest('.tooltip');
            if (!tooltip) return;
            
            const action = tooltip.dataset.tooltip;
            // 支持缩略图视图和列表视图的卡片选择
            const card = e.target.closest('.knowledge-card') || e.target.closest('.bg-white.border');
            if (!card) return;
            
            const documentTitle = card.querySelector('h3')?.textContent || '未知文档';
            
            // 防止重复点击
            if (card.dataset.processing === 'true') {
                showToast('操作正在进行中，请稍候...', 'info');
                return;
            }
            
            switch(action) {
                case '预览':
                    try {
                        showPreviewModal();
                    } catch (error) {
                        console.error('预览功能错误:', error);
                        showToast('预览功能暂时不可用', 'error');
                    }
                    break;
                    
                case '编辑':
                    try {
                        card.dataset.processing = 'true';
                        showEditModal(card, documentTitle);
                    } catch (error) {
                        console.error('编辑功能错误:', error);
                        showToast('编辑功能暂时不可用', 'error');
                        card.dataset.processing = 'false';
                    }
                    break;
                    
                case '删除':
                    if (confirm(`确定要删除文档"${documentTitle}"吗？此操作不可恢复。`)) {
                        try {
                            card.dataset.processing = 'true';
                            // 添加删除动画
                            card.style.transform = 'scale(0.95)';
                            card.style.opacity = '0.5';
                            
                            setTimeout(() => {
                                card.style.transform = 'translateX(100%)';
                                card.style.opacity = '0';
                            }, 150);
                            
                            setTimeout(() => {
                                try {
                                    card.remove();
                                    showToast(`文档"${documentTitle}"删除成功！`, 'success');
                                    updateStatistics();
                                } catch (error) {
                                    console.error('删除文档错误:', error);
                                    showToast('删除失败，请重试', 'error');
                                }
                            }, 400);
                        } catch (error) {
                            console.error('删除功能错误:', error);
                            showToast('删除失败，请重试', 'error');
                            card.style.transform = 'scale(1)';
                            card.style.opacity = '1';
                            card.dataset.processing = 'false';
                        }
                    }
                    break;
                    
                case '查看进度':
                    try {
                        card.dataset.processing = 'true';
                        showProgressModal(card, documentTitle);
                    } catch (error) {
                        console.error('查看进度功能错误:', error);
                        showToast('查看进度功能暂时不可用', 'error');
                        card.dataset.processing = 'false';
                    }
                    break;
                    
                default:
                    console.warn('未知的操作类型:', action);
            }
        });
        
        // 显示编辑模态框
        function showEditModal(card, documentTitle) {
            const editModal = document.createElement('div');
            editModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-enter';
            editModal.innerHTML = `
                <div class="bg-white rounded-xl p-6 w-96 max-w-md shadow-2xl">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800 flex items-center">
                            <i class="fas fa-edit text-indigo-600 mr-2"></i>
                            编辑文档信息
                        </h3>
                        <button class="close-edit-modal text-slate-400 hover:text-slate-600 transition-colors">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">文档标题</label>
                            <input type="text" id="editTitle" value="${documentTitle}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">描述</label>
                            <textarea id="editDescription" rows="3" placeholder="添加文档描述..." class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500 resize-none"></textarea>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">标签</label>
                            <input type="text" id="editTags" placeholder="用逗号分隔标签" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">知识库</label>
                            <select id="editLibrary" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                                <option value="1">技术文档库</option>
                                <option value="2">工作资料库</option>
                                <option value="3">学习资料库</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="flex justify-end space-x-3 mt-6">
                        <button class="close-edit-modal px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                            取消
                        </button>
                        <button class="save-edit px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            保存修改
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(editModal);
            
            // 关闭模态框事件
            const closeButtons = editModal.querySelectorAll('.close-edit-modal');
            closeButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    card.dataset.processing = 'false';
                    document.body.removeChild(editModal);
                });
            });
            
            // 保存编辑事件
            const saveButton = editModal.querySelector('.save-edit');
            saveButton.addEventListener('click', () => {
                const newTitle = document.getElementById('editTitle').value.trim();
                const newDescription = document.getElementById('editDescription').value.trim();
                const newTags = document.getElementById('editTags').value.trim();
                const newLibrary = document.getElementById('editLibrary').value;
                
                // 表单验证
                if (!newTitle) {
                    showToast('文档标题不能为空', 'error');
                    return;
                }
                
                try {
                    // 更新卡片信息
                    const titleElement = card.querySelector('h3');
                    if (titleElement) {
                        titleElement.textContent = newTitle;
                    }
                    
                    // 显示保存成功提示
                    showToast(`文档"${newTitle}"修改成功！`, 'success');
                    
                    // 添加保存动画效果
                    card.style.transform = 'scale(1.02)';
                    card.style.borderColor = '#10b981';
                    setTimeout(() => {
                        card.style.transform = 'scale(1)';
                        card.style.borderColor = '';
                    }, 300);
                    
                    card.dataset.processing = 'false';
                    document.body.removeChild(editModal);
                } catch (error) {
                    console.error('保存编辑错误:', error);
                    showToast('保存失败，请重试', 'error');
                }
            });
            
            // 点击背景关闭
            editModal.addEventListener('click', (e) => {
                if (e.target === editModal) {
                    card.dataset.processing = 'false';
                    document.body.removeChild(editModal);
                }
            });
            
            // 模态框销毁时重置状态
            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.type === 'childList') {
                        const removedNodes = Array.from(mutation.removedNodes);
                        if (removedNodes.includes(editModal)) {
                            card.dataset.processing = 'false';
                            observer.disconnect();
                        }
                    }
                });
            });
            
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        }
        
        // 显示进度模态框
        function showProgressModal(card, documentTitle) {
            const progressModal = document.createElement('div');
            progressModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-enter';
            progressModal.innerHTML = `
                <div class="bg-white rounded-xl p-6 w-96 max-w-md shadow-2xl">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800 flex items-center">
                            <i class="fas fa-chart-line text-indigo-600 mr-2"></i>
                            解析进度
                        </h3>
                        <button class="close-progress-modal text-slate-400 hover:text-slate-600 transition-colors">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="text-center">
                            <p class="font-medium text-slate-800 mb-2">${documentTitle}</p>
                            <div class="w-full bg-slate-200 rounded-full h-3 mb-2">
                                <div id="progressBar" class="bg-gradient-to-r from-indigo-500 to-purple-600 h-3 rounded-full transition-all duration-500" style="width: 65%"></div>
                            </div>
                            <p class="text-sm text-slate-600">正在解析第 78/120 页...</p>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div class="bg-blue-50 p-3 rounded-lg text-center">
                                <p class="text-xl font-bold text-blue-600">78</p>
                                <p class="text-xs text-blue-600">已解析页数</p>
                            </div>
                            <div class="bg-purple-50 p-3 rounded-lg text-center">
                                <p class="text-xl font-bold text-purple-600">42</p>
                                <p class="text-xs text-purple-600">剩余页数</p>
                            </div>
                        </div>
                        
                        <div class="bg-yellow-50 p-3 rounded-lg">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-info-circle text-yellow-600"></i>
                                <p class="text-sm text-yellow-800">预计还需 2-3 分钟完成解析</p>
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">开始时间</span>
                                <span class="font-medium">2024-01-16 14:30</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">已用时间</span>
                                <span class="font-medium">15分32秒</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">处理速度</span>
                                <span class="font-medium">5.1 页/分钟</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-end space-x-3 mt-6">
                        <button class="close-progress-modal px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                            关闭
                        </button>
                        <button class="pause-parsing px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors">
                            暂停解析
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(progressModal);
            
            // 模拟进度更新
            let progress = 65;
            const progressBar = progressModal.querySelector('#progressBar');
            const progressInterval = setInterval(() => {
                progress += Math.random() * 3;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(progressInterval);
                    // 解析完成
                    setTimeout(() => {
                        showToast('文档解析完成！', 'success');
                        document.body.removeChild(progressModal);
                    }, 1000);
                }
                progressBar.style.width = progress + '%';
            }, 2000);
            
            // 关闭模态框事件
            const closeButtons = progressModal.querySelectorAll('.close-progress-modal');
            closeButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    clearInterval(progressInterval);
                    card.dataset.processing = 'false';
                    document.body.removeChild(progressModal);
                });
            });
            
            // 暂停解析按钮
            const pauseButton = progressModal.querySelector('.pause-parsing');
            pauseButton.addEventListener('click', () => {
                if (pauseButton.textContent.includes('暂停')) {
                    clearInterval(progressInterval);
                    pauseButton.textContent = '继续解析';
                    pauseButton.className = 'pause-parsing px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors';
                    showToast('解析已暂停', 'info');
                } else {
                    // 重新开始进度更新
                    const newInterval = setInterval(() => {
                        progress += Math.random() * 3;
                        if (progress >= 100) {
                            progress = 100;
                            clearInterval(newInterval);
                            setTimeout(() => {
                                showToast('文档解析完成！', 'success');
                                card.dataset.processing = 'false';
                                document.body.removeChild(progressModal);
                            }, 1000);
                        }
                        progressBar.style.width = progress + '%';
                    }, 2000);
                    pauseButton.textContent = '暂停解析';
                    pauseButton.className = 'pause-parsing px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors';
                    showToast('解析已继续', 'info');
                }
            });
            
            // 点击背景关闭
            progressModal.addEventListener('click', (e) => {
                if (e.target === progressModal) {
                    clearInterval(progressInterval);
                    card.dataset.processing = 'false';
                    document.body.removeChild(progressModal);
                }
            });
            
            // 模态框销毁时重置状态
            const progressObserver = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.type === 'childList') {
                        const removedNodes = Array.from(mutation.removedNodes);
                        if (removedNodes.includes(progressModal)) {
                            clearInterval(progressInterval);
                            card.dataset.processing = 'false';
                            progressObserver.disconnect();
                        }
                    }
                });
            });
            
            progressObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
        }
        
        // 更新统计信息
        function updateStatistics() {
            // 这里可以实现统计信息的更新逻辑
            const totalDocs = document.querySelectorAll('.knowledge-card').length;
            console.log('更新统计信息，总文档数:', totalDocs);
        }

        // 分页功能
        const paginationBtns = document.querySelectorAll('.pagination-btn');
        paginationBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 这里可以实现分页逻辑
                console.log('切换页面：', btn.textContent);
            });
        });

        // 视图切换功能
        function switchView(viewType) {
            const listViewBtn = document.getElementById('listViewBtn');
            const thumbnailViewBtn = document.getElementById('thumbnailViewBtn');
            const documentContainer = document.querySelector('.flex-1.overflow-y-auto.custom-scrollbar.p-6');
            
            if (viewType === 'list') {
                listViewBtn.classList.add('bg-white', 'shadow-sm');
                listViewBtn.classList.remove('text-slate-600');
                thumbnailViewBtn.classList.remove('bg-white', 'shadow-sm');
                thumbnailViewBtn.classList.add('text-slate-600');
                
                // 切换到列表视图
                const listHTML = `
                    <div class="space-y-4">
                        <div class="knowledge-card bg-white border border-slate-200 rounded-lg" data-processing="false">
                            <div class="p-4">
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-file-pdf text-blue-600"></i>
                                        </div>
                                        <div>
                                            <h3 class="font-semibold text-slate-800">Python编程指南</h3>
                                            <p class="text-sm text-slate-500">2.3MB • PDF</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                                        <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                            <i class="fas fa-eye text-sm"></i>
                                        </button>
                                        <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                            <i class="fas fa-edit text-sm"></i>
                                        </button>
                                        <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                            <i class="fas fa-trash text-sm"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-6 gap-4 text-sm">
                                    <div>
                                        <span class="text-slate-600">分片数量</span>
                                        <p class="font-medium">156</p>
                                    </div>
                                    <div>
                                        <span class="text-slate-600">上传时间</span>
                                        <p class="font-medium">2024-01-15</p>
                                    </div>
                                    <div class="col-span-2">
                                        <span class="text-slate-600">标签</span>
                                        <div class="flex flex-wrap gap-1 mt-1">
                                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">Python</span>
                                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">编程</span>
                                            <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">技术文档</span>
                                        </div>
                                    </div>
                                    <div class="col-span-2">
                                        <div class="w-full bg-slate-200 rounded-full h-2 mt-2">
                                            <div class="progress-bar" style="width: 100%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="knowledge-card bg-white border border-slate-200 rounded-lg" data-processing="false">
                            <div class="p-4">
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-file-word text-green-600"></i>
                                        </div>
                                        <div>
                                            <h3 class="font-semibold text-slate-800">机器学习算法总结</h3>
                                            <p class="text-sm text-slate-500">1.8MB • DOCX</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                                        <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                            <i class="fas fa-eye text-sm"></i>
                                        </button>
                                        <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                            <i class="fas fa-edit text-sm"></i>
                                        </button>
                                        <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                            <i class="fas fa-trash text-sm"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-6 gap-4 text-sm">
                                    <div>
                                        <span class="text-slate-600">分片数量</span>
                                        <p class="font-medium">89</p>
                                    </div>
                                    <div>
                                        <span class="text-slate-600">上传时间</span>
                                        <p class="font-medium">2024-01-12</p>
                                    </div>
                                    <div class="col-span-2">
                                        <span class="text-slate-600">标签</span>
                                        <div class="flex flex-wrap gap-1 mt-1">
                                            <span class="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full">机器学习</span>
                                            <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">算法</span>
                                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">AI</span>
                                        </div>
                                    </div>
                                    <div class="col-span-2">
                                        <div class="w-full bg-slate-200 rounded-full h-2 mt-2">
                                            <div class="progress-bar" style="width: 100%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="knowledge-card bg-white border border-slate-200 rounded-lg" data-processing="false">
                            <div class="p-4">
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-file-pdf text-yellow-600"></i>
                                        </div>
                                        <div>
                                            <h3 class="font-semibold text-slate-800">深度学习框架对比</h3>
                                            <p class="text-sm text-slate-500">3.1MB • PDF</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">解析中</span>
                                        <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="查看进度">
                                            <i class="fas fa-chart-line text-sm"></i>
                                        </button>
                                        <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="取消">
                                            <i class="fas fa-times text-sm"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="grid grid-cols-6 gap-4 text-sm">
                                    <div>
                                        <span class="text-slate-600">预计分片</span>
                                        <p class="font-medium">~120</p>
                                    </div>
                                    <div>
                                        <span class="text-slate-600">开始时间</span>
                                        <p class="font-medium">2024-01-16 14:30</p>
                                    </div>
                                    <div class="col-span-2">
                                        <span class="text-slate-600">进度</span>
                                        <div class="flex items-center space-x-2 mt-1">
                                            <div class="loading-dots">
                                                <span></span>
                                                <span></span>
                                                <span></span>
                                            </div>
                                            <span class="text-xs text-slate-500">78/120 页</span>
                                        </div>
                                    </div>
                                    <div class="col-span-2">
                                        <div class="w-full bg-slate-200 rounded-full h-2 mt-2">
                                            <div class="progress-bar" style="width: 65%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="flex items-center justify-between mt-6">
                        <span class="text-sm text-slate-500">显示 1-3 条，共 45 条记录</span>
                        <div class="flex items-center space-x-1">
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">上一页</button>
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded bg-slate-100">1</button>
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">2</button>
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">3</button>
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">下一页</button>
                        </div>
                    </div>
                `;
                documentContainer.innerHTML = listHTML;
                
                // 重新绑定事件
                bindDocumentEvents();
                
            } else {
                thumbnailViewBtn.classList.add('bg-white', 'shadow-sm');
                thumbnailViewBtn.classList.remove('text-slate-600');
                listViewBtn.classList.remove('bg-white', 'shadow-sm');
                listViewBtn.classList.add('text-slate-600');
                
                // 切换到缩略图视图（恢复原始内容）
                const thumbnailHTML = `
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 文档卡片 1 -->
                        <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-file-pdf text-blue-600 text-xl file-icon-pdf"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">Python编程指南</h3>
                                        <p class="text-sm text-slate-500">2.3MB • PDF</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                        <i class="fas fa-edit text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="flex items-center justify-between text-sm mb-2">
                                    <span class="text-slate-600">解析状态</span>
                                    <span class="status-badge px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div class="progress-bar" style="width: 100%"></div>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">分片数量</span>
                                    <span class="font-medium">156</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">上传时间</span>
                                    <span class="font-medium">2024-01-15</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 flex flex-wrap gap-1">
                                <span class="tag px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">Python</span>
                                <span class="tag px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">编程</span>
                                <span class="tag px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">技术文档</span>
                            </div>
                        </div>

                        <!-- 文档卡片 2 -->
                        <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-file-word text-green-600 text-xl file-icon-docx"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">机器学习算法总结</h3>
                                        <p class="text-sm text-slate-500">1.8MB • DOCX</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                        <i class="fas fa-edit text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="flex items-center justify-between text-sm mb-2">
                                    <span class="text-slate-600">解析状态</span>
                                    <span class="status-badge px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div class="progress-bar" style="width: 100%"></div>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">分片数量</span>
                                    <span class="font-medium">89</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">上传时间</span>
                                    <span class="font-medium">2024-01-12</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 flex flex-wrap gap-1">
                                <span class="tag px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full">机器学习</span>
                                <span class="tag px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">算法</span>
                                <span class="tag px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">AI</span>
                            </div>
                        </div>

                        <!-- 文档卡片 3 - 解析中 -->
                        <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-file-pdf text-yellow-600 text-xl file-icon-pdf"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">深度学习框架对比</h3>
                                        <p class="text-sm text-slate-500">3.1MB • PDF</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="查看进度">
                                        <i class="fas fa-chart-line text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="取消">
                                        <i class="fas fa-times text-sm"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="flex items-center justify-between text-sm mb-2">
                                    <span class="text-slate-600">解析状态</span>
                                    <span class="status-badge px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">解析中</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div class="progress-bar" style="width: 65%"></div>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">预计分片</span>
                                    <span class="font-medium">~120</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">开始时间</span>
                                    <span class="font-medium">2024-01-16 14:30</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 flex items-center space-x-2">
                                <div class="loading-dots">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <span class="text-sm text-slate-500">正在解析第 78/120 页...</span>
                            </div>
                        </div>

                        <!-- 文档卡片 4 -->
                        <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-file-alt text-purple-600 text-xl file-icon-txt"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">API设计规范</h3>
                                        <p class="text-sm text-slate-500">156KB • TXT</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                        <i class="fas fa-edit text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="flex items-center justify-between text-sm mb-2">
                                    <span class="text-slate-600">解析状态</span>
                                    <span class="status-badge px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div class="progress-bar" style="width: 100%"></div>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">分片数量</span>
                                    <span class="font-medium">23</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">上传时间</span>
                                    <span class="font-medium">2024-01-10</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 flex flex-wrap gap-1">
                                <span class="tag px-2 py-1 bg-indigo-100 text-indigo-700 text-xs rounded-full">API</span>
                                <span class="tag px-2 py-1 bg-teal-100 text-teal-700 text-xs rounded-full">设计</span>
                                <span class="tag px-2 py-1 bg-pink-100 text-pink-700 text-xs rounded-full">规范</span>
                            </div>
                        </div>

                        <!-- 文档卡片 5 -->
                        <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-file-excel text-red-600 text-xl file-icon-default"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">数据库性能指标</h3>
                                        <p class="text-sm text-slate-500">2.8MB • XLSX</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                        <i class="fas fa-edit text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="flex items-center justify-between text-sm mb-2">
                                    <span class="text-slate-600">解析状态</span>
                                    <span class="status-badge px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">解析失败</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">错误信息</span>
                                    <span class="font-medium text-red-600">格式不支持</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">失败时间</span>
                                    <span class="font-medium">2024-01-14</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 flex items-center space-x-2">
                                <button class="px-3 py-1 bg-red-100 text-red-700 text-xs rounded-full hover:bg-red-200">
                                    <i class="fas fa-redo mr-1"></i>重新解析
                                </button>
                                <button class="px-3 py-1 bg-slate-100 text-slate-700 text-xs rounded-full hover:bg-slate-200">
                                    <i class="fas fa-info-circle mr-1"></i>查看详情
                                </button>
                            </div>
                        </div>

                        <!-- 文档卡片 6 -->
                        <div class="knowledge-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-file-code text-teal-600 text-xl file-icon-md"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">Docker容器化指南</h3>
                                        <p class="text-sm text-slate-500">890KB • MD</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="预览">
                                        <i class="fas fa-eye text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-slate-600 rounded-lg tooltip" data-tooltip="编辑">
                                        <i class="fas fa-edit text-sm"></i>
                                    </button>
                                    <button class="p-2 text-slate-400 hover:text-red-600 rounded-lg tooltip" data-tooltip="删除">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="flex items-center justify-between text-sm mb-2">
                                    <span class="text-slate-600">解析状态</span>
                                    <span class="status-badge px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已解析</span>
                                </div>
                                <div class="w-full bg-slate-200 rounded-full h-2">
                                    <div class="progress-bar" style="width: 100%"></div>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">分片数量</span>
                                    <span class="font-medium">67</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">上传时间</span>
                                    <span class="font-medium">2024-01-08</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 flex flex-wrap gap-1">
                                <span class="tag px-2 py-1 bg-cyan-100 text-cyan-700 text-xs rounded-full">Docker</span>
                                <span class="tag px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">容器化</span>
                                <span class="tag px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">DevOps</span>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="flex items-center justify-between mt-6">
                        <span class="text-sm text-slate-500">显示 1-6 条，共 45 条记录</span>
                        <div class="flex items-center space-x-1">
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">上一页</button>
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded bg-slate-100">1</button>
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">2</button>
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">3</button>
                            <button class="pagination-btn px-3 py-1 text-sm border border-slate-300 rounded">下一页</button>
                        </div>
                    </div>
                `;
                documentContainer.innerHTML = thumbnailHTML;
                
                // 重新绑定事件
                bindDocumentEvents();
            }
        }

        // 导出功能
        function showExportModal() {
            // 检查是否已经存在导出模态框
            const existingModal = document.querySelector('#exportModal');
            if (existingModal) {
                existingModal.classList.remove('hidden');
                return;
            }
            
            const exportModal = document.createElement('div');
            exportModal.id = 'exportModal';
            exportModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            exportModal.innerHTML = `
                <div class="bg-white rounded-xl p-6 w-96 max-w-md shadow-2xl">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800 flex items-center">
                            <i class="fas fa-download text-indigo-600 mr-2"></i>
                            导出知识库数据
                        </h3>
                        <button onclick="closeExportModal()" class="text-slate-400 hover:text-slate-600 transition-colors">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">选择知识库</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                                <option value="1">技术文档库</option>
                                <option value="2">工作资料库</option>
                                <option value="3">学习资料库</option>
                                <option value="all">全部知识库</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">选择文档</label>
                            <div class="border border-slate-300 rounded-lg max-h-60 overflow-y-auto">
                                <div class="p-2 border-b border-slate-200 bg-slate-50">
                                    <label class="flex items-center space-x-2">
                                        <input type="checkbox" id="selectAllDocs" class="document-checkbox" data-all="true">
                                        <span class="text-sm font-medium">全选</span>
                                    </label>
                                </div>
                                <div class="divide-y divide-slate-200">
                                    <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 cursor-pointer">
                                        <input type="checkbox" class="document-checkbox" checked>
                                        <div class="flex-1">
                                            <div class="text-sm font-medium">Python编程指南</div>
                                            <div class="text-xs text-slate-500">PDF • 2.3MB • 已解析</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 cursor-pointer">
                                        <input type="checkbox" class="document-checkbox" checked>
                                        <div class="flex-1">
                                            <div class="text-sm font-medium">机器学习算法总结</div>
                                            <div class="text-xs text-slate-500">DOCX • 1.8MB • 已解析</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 cursor-pointer">
                                        <input type="checkbox" class="document-checkbox">
                                        <div class="flex-1">
                                            <div class="text-sm font-medium">深度学习框架对比</div>
                                            <div class="text-xs text-slate-500">PDF • 3.1MB • 解析中</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 cursor-pointer">
                                        <input type="checkbox" class="document-checkbox">
                                        <div class="flex-1">
                                            <div class="text-sm font-medium">API设计规范</div>
                                            <div class="text-xs text-slate-500">TXT • 156KB • 已解析</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 cursor-pointer">
                                        <input type="checkbox" class="document-checkbox">
                                        <div class="flex-1">
                                            <div class="text-sm font-medium">数据库性能指标</div>
                                            <div class="text-xs text-slate-500">XLSX • 2.8MB • 解析失败</div>
                                        </div>
                                    </label>
                                    <label class="flex items-center space-x-2 p-2 hover:bg-slate-50 cursor-pointer">
                                        <input type="checkbox" class="document-checkbox">
                                        <div class="flex-1">
                                            <div class="text-sm font-medium">Docker容器化指南</div>
                                            <div class="text-xs text-slate-500">MD • 890KB • 已解析</div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">导出格式</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:border-indigo-500">
                                <option value="json">JSON</option>
                                <option value="csv">CSV</option>
                                <option value="excel">Excel</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-2 mt-6">
                        <button onclick="closeExportModal()" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">取消</button>
                        <button onclick="exportData()" class="btn-primary px-4 py-2 text-white rounded-lg">导出</button>
                    </div>
                </div>
            `;
            document.body.appendChild(exportModal);
        }

        function closeExportModal() {
            const exportModal = document.querySelector('#exportModal');
            if (exportModal) {
                exportModal.remove();
            }
        }

        function exportData() {
            showToast('正在导出数据...', 'info');
            setTimeout(() => {
                closeExportModal();
                showToast('数据导出成功！', 'success');
            }, 2000);
        }

        // 全选功能
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('document-checkbox') && e.target.dataset.all === 'true') {
                const allCheckboxes = document.querySelectorAll('.document-checkbox:not([data-all])');
                const isChecked = e.target.checked;
                
                allCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
            }
        });
        
        // 修复全选功能 - 添加事件监听器到模态框内部
        document.addEventListener('click', (e) => {
            if (e.target.id === 'selectAllDocs') {
                const allCheckboxes = document.querySelectorAll('.document-checkbox:not([data-all])');
                const isChecked = e.target.checked;
                
                allCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
            }
        });

        // 知识库图标选择功能
        document.addEventListener('click', (e) => {
            if (e.target.closest('.library-icon')) {
                const iconBtn = e.target.closest('.library-icon');
                const allIcons = document.querySelectorAll('.library-icon');
                
                // 移除所有选中状态
                allIcons.forEach(icon => {
                    icon.classList.remove('bg-indigo-50', 'border-indigo-300');
                    icon.classList.add('border-slate-300');
                    icon.querySelector('i').classList.remove('text-indigo-600');
                    icon.querySelector('i').classList.add('text-slate-600');
                });
                
                // 添加选中状态
                iconBtn.classList.remove('border-slate-300');
                iconBtn.classList.add('bg-indigo-50', 'border-indigo-300');
                iconBtn.querySelector('i').classList.remove('text-slate-600');
                iconBtn.querySelector('i').classList.add('text-indigo-600');
            }
        });

        // 绑定文档操作事件
        function bindDocumentEvents() {
            const paginationBtns = document.querySelectorAll('.pagination-btn');
            paginationBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    console.log('切换页面：', btn.textContent);
                });
            });
        }

        // 页面加载完成后的初始化
        window.addEventListener('load', () => {
            // 默认选中第一个知识库
            if (knowledgeItems.length > 0) {
                knowledgeItems[0].click();
            }
            
            // 默认显示列表视图
            setTimeout(() => {
                switchView('list');
            }, 100);
        });
    </script>
</body>
</html>